<template >
   <div id="reports">
       <!-- 面包屑 -->
       <el-breadcrumb separator-class="el-icon-arrow-right">
           <el-breadcrumb-item :to="{ path: '/menu/' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item><a href="/menu/">首页</a></el-breadcrumb-item>
           <el-breadcrumb-item>首页</el-breadcrumb-item>
       </el-breadcrumb>
       <!-- 卡片 -->
       <el-card class="box-card">

           <!-- 报表 -->
           <div style="width:100%;height:700px" ref="chart"></div>
           
       </el-card>
   </div>
</template>
<script>
export default {
 data(){
   return{
      option : {
    legend: {},
    tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
    dataset: {
      source: [
        ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
        ['华东', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
        ['华北', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
        ['华南', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
        ['西部', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
        ['其他', 35.2, 47.1, 51.2, 28, 43.9, 59.1]

      ]
    },
    xAxis: { type: 'category' },
    yAxis: { gridIndex: 0 },
    grid: { top: '55%' },
    series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          // focus: 'self'
        },
        label: {
          formatter: '{b}: {@2012} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '2012',
          tooltip: '2012'
        }
      }
    ]
  }
   }
 },
//   钩子函数
 mounted(){
this.makechart()
 },
//   计算
computed:{

},
//   方法
 methods:{
   makechart(){
   let mychart = this.echarts.init(this.$refs.chart)
   mychart.setOption(this.option)
   }
 },
//    监听
  watch:{},
//    筛选
filters:{},
}
</script>
<style  scoped>
   .box-card{
       width: 100%;
       margin-top: 15px;
   }
</style>